<template>
  <el-tabs type="border-card" v-model="activeTab" @tab-click="handleTabClick" >
    <el-tab-pane label="工場→RD" name="supplier">
      <el-table v-loading="loading" :data="scmInventoryListForSupp" @selection-change="handleSelectionChange">
<!--        <el-table-column type="selection" width="55" align="center" />-->
        <el-table-column label="图号" align="center" prop="scmProjectProducts.drawingNumber" width="100" />
        <el-table-column label="版本" align="center" prop="scmProjectProducts.version" width="100" />
        <el-table-column label="商品名称" align="center" prop="scmProjectProducts.productName" width="100" />
        <el-table-column label="订单编号" align="center" prop="orderCode" width="170"/>
        <el-table-column label="注文数量" align="center" prop="orderTotalQuantity" width="100" />
        <el-table-column label="欠品数量" align="center" prop="quantityInThisTimeHasIssue" width="100" />
        <el-table-column label="出荷数量" align="center" prop="changeQuantity" width="100" />
        <el-table-column label="出荷日期" align="center" prop="createdAt" width="100" />
        <el-table-column label="运送方式" align="center" prop="transportChannel" width="100" >
          <template #default="scope">
            <dict-tag :options="scm_transport_channel" :value="scope.row.transportChannel"/>
          </template>
        </el-table-column>
        <el-table-column label="材质" align="center" prop="scmProjectProducts.material"  />
        <el-table-column label="规格" align="center" prop="scmProjectProducts.specification"  />
        <el-table-column label="颜色" align="center" prop="scmProjectProducts.color"  />
<!--        <el-table-column label="当前流程状态" align="center" prop="status">-->
<!--          <template #default="scope">-->
<!--            {{ scope.row.status === '1' || scope.row.status === 1 ? '已提交' : scope.row.status }}-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column label="数据来源" align="center" prop="dataSource" />-->
<!--        <el-table-column label="总额" align="center" prop="totalAmount" />-->
<!--        <el-table-column label="申请人" align="center" prop="handler" />-->
<!--        <el-table-column label="出入库标识" align="center" prop="inOutIndicator">-->
<!--          <template #default="scope">-->
<!--            {{ scope.row.inOutIndicator === '1' || scope.row.inOutIndicator === 1 ? '入库' : '出库' }}-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column label="请求日期" align="center" prop="requestDate" width="180">-->
<!--          <template #default="scope">-->
<!--            <span>{{ parseTime(scope.row.requestDate, '{y}-{m}-{d}') }}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->

      </el-table>

      <pagination
          v-show="totalForSupp>0"
          :total="totalForSupp"
          :page.sync="queryParamsForSupp.pageNum"
          :limit.sync="queryParamsForSupp.pageSize"
          @pagination="getListForSupp"
      />
    </el-tab-pane>
    <el-tab-pane label="RD→お客" name="customer" >
      <el-table v-loading="loading" :data="scmInventoryListForCust" >
        <el-table-column label="图号" align="center" prop="scmProjectProducts.drawingNumber" width="100" />
        <el-table-column label="版本" align="center" prop="scmProjectProducts.version" width="100" />
        <el-table-column label="商品名称" align="center" prop="scmProjectProducts.productName" width="100" />
        <el-table-column label="订单编号" align="center" prop="orderCode" width="170"/>
        <el-table-column label="注文数量" align="center" prop="changeQuantity" width="100" />
        <el-table-column label="欠品数量" align="center" prop="changeQuantity" width="100" />
        <el-table-column label="出荷数量" align="center" prop="changeQuantity" width="100" />
        <el-table-column label="出荷日期" align="center" prop="createdAt" width="100" />
        <el-table-column label="运送方式" align="center" prop="transportChannel" width="100" >
          <template #default="scope">
            <dict-tag :options="scm_transport_channel" :value="scope.row.transportChannel"/>
          </template>
        </el-table-column>
        <el-table-column label="材质" align="center" prop="scmProjectProducts.material"  />
        <el-table-column label="规格" align="center" prop="scmProjectProducts.specification"  />
        <el-table-column label="颜色" align="center" prop="scmProjectProducts.color"  />
      </el-table>
      <pagination
          v-show="totalForCust>0"
          :total="totalForCust"
          :page.sync="queryParamsForCust.pageNum"
          :limit.sync="queryParamsForCust.pageSize"
          @pagination="getListForCust"
      />

    </el-tab-pane>
  </el-tabs>

</template>

<script setup>
import {listInventoryLogByProject} from "@/api/scm/scmInventoryLog.js";

import {onMounted, ref} from "vue";
import {
  addScmInquiriesIn, delScmInquiriesIn,
  getScmInquiriesIn,
  listScmInquiriesIn,
  updateScmInquiriesIn
} from "@/api/scm/ScmInquiriesIn.js";

const props = defineProps({
  projectId: {
    type: String,
    default: ''
  }
})

// const data = reactive({
//   form: {},
//   queryParams: {
//     projectId: props.projectId,
//   }
// });
const { proxy } = getCurrentInstance();
const { scm_transport_channel } = proxy.useDict('scm_transport_channel' );

const data = reactive({
  formForSupp: {},
  queryParamsForSupp: {
    pageNum: 1,
    pageSize: 10,
    projectId: props.projectId,
    changeType: 1
  },
  formForCust: {},
  queryParamsForCust: {
    pageNum: 1,
    pageSize: 10,
    projectId: props.projectId,
    changeType: 2
  }
});

const { queryParamsForSupp, formForSupp, queryParamsForCust } = toRefs(data);

// const localProjectId = ref(props.projectId);
// 监听 projectId 变化
watch(
    () => props.projectId,
    (newVal) => {
      console.log('projectId changed to:', newVal);
      queryParamsForSupp.value.projectId = newVal; // 更新本地变量
      getList();
    }
);

const showSearchForSupp = ref(true)
const loadingForSupp = ref(false)
const scmInventoryListForSupp = ref([])
const totalForSupp = ref(0)
const loadingForCust = ref(false)
const scmInventoryListForCust = ref([])
const totalForCust = ref(0)
const single = ref(true)
const multiple = ref(true)
const title = ref('')
const openForSupp = ref(false)
const ids = ref([]);




// 多选框选中数据
const handleSelectionChange = (selection) => {
  ids.value = selection.map(item => item.id);
  single.value = selection.length !== 1;
  multiple.value = !selection.length;
  console.log("ids:" + ids.value);
}

const getListForSupp = () => {
  loadingForSupp.value = true
  queryParamsForSupp.value.projectId = props.projectId
  queryParamsForSupp.value.changeType = '1';
  listInventoryLogByProject(queryParamsForSupp.value).then(response => {
    scmInventoryListForSupp.value = response.rows;
    totalForSupp.value = response.total;
    loadingForSupp.value = false;
  })
}

const getListForCust = () => {
  loadingForCust.value = true
  queryParamsForCust.value.projectId = props.projectId
  queryParamsForCust.value.changeType = '2';
  listInventoryLogByProject(queryParamsForCust.value).then(response => {
    scmInventoryListForCust.value = response.rows;
    totalForCust.value = response.total;
    loadingForCust.value = false;
  })
}

// 定义当前激活的标签页，默认为 'supplier'
const activeTab = ref('supplier')
const handleTabClick = (tab, event) => {
  // 根据标签页执行不同操作
  if (tab.props.name === 'supplier') {
    getListForSupp();
  } else if (tab.props.name === 'customer') {
    getListForCust();
  }
}


onMounted(() => {
  getListForSupp()
})

</script>